<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Textarea - Spec</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Textarea - Spec</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <h1>Floating Textareas</h1>

        <div class="grid">
          <div class="column">
            <h2>Inactive</h2>
            <ion-item>
              <ion-label position="floating">Label</ion-label>
              <ion-textarea placeholder="Placeholder Text"></ion-textarea>
            </ion-item>
          </div>

          <div class="column">
            <h2>Focused</h2>
            <ion-item class="item-has-focus">
              <ion-label position="floating">Label</ion-label>
              <ion-textarea placeholder="Placeholder Text"></ion-textarea>
            </ion-item>
          </div>

          <div class="column">
            <h2>Activated</h2>
            <ion-item>
              <ion-label position="floating">Label</ion-label>
              <ion-textarea placeholder="Placeholder Text" value="Textarea Text"></ion-textarea>
            </ion-item>
          </div>

          <div class="column">
            <h2>Hover</h2>
            <ion-item class="item-hovered">
              <ion-label position="floating">Label</ion-label>
              <ion-textarea></ion-textarea>
            </ion-item>
          </div>

          <div class="column">
            <h2>Disabled</h2>
            <ion-item>
              <ion-label position="floating">Label</ion-label>
              <ion-textarea disabled></ion-textarea>
            </ion-item>
          </div>

          <div class="column">
            <h2>Toggle Placeholder</h2>
            <ion-item>
              <ion-label position="floating">Label</ion-label>
              <ion-textarea id="floatingToggle" type="password"></ion-textarea>
              <ion-button
                fill="clear"
                slot="end"
                onClick="togglePlaceholder('#floatingToggle')"
                class="ion-align-self-center"
              >
                Toggle
              </ion-button>
            </ion-item>
          </div>
        </div>

        <h1>Stacked textareas</h1>

        <div class="grid">
          <div class="column">
            <h2>Inactive</h2>
            <ion-item>
              <ion-label position="stacked">Label</ion-label>
              <ion-textarea></ion-textarea>
            </ion-item>
          </div>

          <div class="column">
            <h2>Focused</h2>
            <ion-item class="item-has-focus">
              <ion-label position="stacked">Label</ion-label>
              <ion-textarea placeholder="Placeholder Text"></ion-textarea>
            </ion-item>
          </div>

          <div class="column">
            <h2>Activated</h2>
            <ion-item>
              <ion-label position="stacked">Label</ion-label>
              <ion-textarea placeholder="Placeholder Text" value="textarea Text"></ion-textarea>
            </ion-item>
          </div>

          <div class="column">
            <h2>Hover</h2>
            <ion-item class="item-hovered">
              <ion-label position="stacked">Label</ion-label>
              <ion-textarea></ion-textarea>
            </ion-item>
          </div>

          <div class="column">
            <h2>Disabled</h2>
            <ion-item>
              <ion-label position="stacked">Label</ion-label>
              <ion-textarea disabled></ion-textarea>
            </ion-item>
          </div>

          <div class="column">
            <h2>Toggle Placeholder</h2>
            <ion-item>
              <ion-label position="stacked">Label</ion-label>
              <ion-textarea id="stackedToggle" type="password"></ion-textarea>
              <ion-button
                fill="clear"
                slot="end"
                onClick="togglePlaceholder('#stackedToggle')"
                class="ion-align-self-center"
              >
                Toggle
              </ion-button>
            </ion-item>
          </div>
        </div>

        <hr />

        <h2>Stacked Div</h2>
        <ion-item>
          <ion-label position="stacked">Label</ion-label>
          <div>A div</div>
        </ion-item>

        <ion-item class="ion-align-items-center">
          <ion-icon slot="start" name="planet"></ion-icon>
          <ion-label position="stacked">Align items: center</ion-label>
          <div>A div</div>
        </ion-item>
        <ion-item class="ion-align-items-center">
          <ion-icon slot="start" name="planet"></ion-icon>
          <ion-label position="stacked">Align items: center</ion-label>
          <div class="ion-align-self-end">A div: align self right</div>
        </ion-item>
        <ion-item>
          <ion-label position="floating">Floating: textarea</ion-label>
          <ion-textarea></ion-textarea>
        </ion-item>
        <ion-item>
          <ion-label position="floating">Floating: textarea value</ion-label>
          <ion-textarea value="value"></ion-textarea>
        </ion-item>
        <ion-item>
          <ion-label position="stacked">Stacked: textarea</ion-label>
          <ion-textarea></ion-textarea>
        </ion-item>
        <ion-item class="item-has-focus">
          <ion-label position="stacked">Stacked: textarea focused value</ion-label>
          <ion-textarea value="value"></ion-textarea>
        </ion-item>
        <ion-item class="custom item-has-focus">
          <ion-label position="stacked">Stacked: textarea focus</ion-label>
          <ion-textarea></ion-textarea>
        </ion-item>
      </ion-content>

      <style>
        h1 {
          font-size: 14px;
          color: #54575e;

          margin: 25px 0 5px 25px;
        }

        h2 {
          display: flex;
          align-items: center;
          justify-content: space-between;

          font-size: 12px;
          font-weight: normal;

          color: #a1a7b0;

          margin-top: 10px;
          margin-left: 5px;
        }

        hr {
          background: #eff1f3;

          margin-top: 18px;
          margin-bottom: 25px;
        }

        .grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          row-gap: 20px;
          column-gap: 20px;
          padding: 0 20px 20px;
        }

        ion-item {
          --background: #e0e0e0;
          --background-hover: #d3d3d3;
        }

        .custom {
          --background: lightblue;
        }

        .custom ion-label {
          color: white !important;
        }

        .custom.item-has-focus ion-label {
          color: purple !important;
        }
      </style>

      <script>
        function togglePlaceholder(id) {
          const textarea = document.querySelector(id);
          textarea.placeholder = textarea.placeholder ? undefined : 'Placeholder Text';
        }
      </script>
    </ion-app>
  </body>
</html>
